<template>
  <div class="max-w-4xl mx-auto bg-white p-10 shadow-lg font-sans leading-relaxed print:shadow-none print:max-w-none print:p-5 print:w-full print:mx-0">
    <!-- 简历头部 -->
    <div class="flex justify-between items-start mb-8 pb-5 border-b-2 border-blue-500">
      <div class="flex-1">
        <h1 class="text-3xl font-bold text-gray-800 mb-3">
          {{ resumeData.name || '姓名' }}
        </h1>
        <div class="flex flex-col gap-1">
          <div v-if="resumeData.phone" class="text-sm text-gray-600">
            <span class="font-medium">电话:</span>
            <span>{{ resumeData.phone }}</span>
          </div>
          <div v-if="resumeData.email" class="text-sm text-gray-600">
            <span class="font-medium">邮箱:</span>
            <span>{{ resumeData.email }}</span>
          </div>
          <div v-if="resumeData.hometown" class="text-sm text-gray-600">
            <span class="font-medium">籍贯:</span>
            <span>{{ resumeData.hometown }}</span>
          </div>
          <div v-if="resumeData.jobIntention" class="text-sm text-gray-600">
            <span class="font-medium">求职意向:</span>
            <span>{{ resumeData.jobIntention }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 根据sectionOrder动态渲染模块 -->
    <template v-for="sectionId in sectionOrder" :key="sectionId">
      <!-- 专业技能 -->
      <ResumeSection
        v-if="sectionId === 'skills' && renderSection(sectionId)"
        title="专业技能"
      >
        <div v-for="(skill, index) in resumeData.skills" :key="index" class="mb-3">
          <p class="text-gray-600 leading-relaxed">{{ skill.description }}</p>
        </div>
      </ResumeSection>

      <!-- 工作经历 -->
      <ResumeSection
        v-if="sectionId === 'work-experience' && renderSection(sectionId)"
        title="工作经历"
      >
        <div v-for="(work, index) in resumeData.workExperience" :key="index" class="mb-5">
          <div class="flex items-center gap-3 mb-2">
            <h3 class="text-base font-semibold text-gray-800">{{ work.company }}</h3>
            <span class="text-blue-500 font-medium">{{ work.position }}</span>
            <span class="text-gray-500 text-sm ml-auto">{{ work.startDate }} - {{ work.endDate }}</span>
          </div>
          <div class="text-gray-600 leading-relaxed">
            <p>{{ work.description }}</p>
          </div>
        </div>
      </ResumeSection>

      <!-- 教育背景 -->
      <ResumeSection
        v-if="sectionId === 'education' && renderSection(sectionId)"
        title="教育背景"
      >
        <div v-for="(edu, index) in resumeData.education" :key="index" class="mb-5">
          <div class="flex items-center gap-3 mb-2">
            <span class="text-blue-500 font-medium">{{ edu.school }}</span>
            <h3 class="text-base font-semibold text-gray-800">{{ edu.major }} - {{ edu.degree }}</h3>
            <span class="text-gray-500 text-sm ml-auto">{{ edu.startDate }} - {{ edu.endDate }}</span>
          </div>
        </div>
      </ResumeSection>

      <!-- 项目经验 -->
      <ResumeSection
        v-if="sectionId === 'projects' && renderSection(sectionId)"
        title="项目经验"
      >
        <div v-for="(project, index) in resumeData.projects" :key="index" class="mb-5">
          <div class="flex items-center gap-3 mb-2">
            <h3 class="text-base font-semibold text-gray-800">{{ project.name }}</h3>
            <span class="text-blue-500 font-medium">{{ project.role }}</span>
            <span class="text-gray-500 text-sm ml-auto">{{ project.duration }}</span>
          </div>
          <div class="text-gray-600 leading-relaxed">
            <p>{{ project.description }}</p>
          </div>
        </div>
      </ResumeSection>

      <!-- 自我评价 -->
      <ResumeSection
        v-if="sectionId === 'self-evaluation' && renderSection(sectionId)"
        title="自我评价"
      >
        <div class="text-gray-600 leading-relaxed">
          <p>{{ resumeData.selfEvaluation }}</p>
        </div>
      </ResumeSection>
    </template>
  </div>
</template>

<script setup lang="ts">
import ResumeSection from './ResumeSection.vue'

interface ResumeData {
  name: string
  phone: string
  email: string
  hometown: string
  currentResidence: string
  jobIntention: string
  education: Array<{
    school: string
    major: string
    degree: string
    startDate: string
    endDate: string
  }>
  workExperience: Array<{
    company: string
    position: string
    startDate: string
    endDate: string
    description: string
  }>
  projects: Array<{
    name: string
    role: string
    duration: string
    description: string
  }>
  skills: Array<{
    description: string
  }>
  selfEvaluation: string
}

interface Props {
  resumeData: ResumeData
  sectionOrder?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  sectionOrder: () => [
    'basic-info',
    'education',
    'work-experience', 
    'projects',
    'skills',
    'self-evaluation'
  ]
})

// 根据sectionOrder渲染对应的模块
const renderSection = (sectionId: string) => {
  switch (sectionId) {
    case 'basic-info':
      return null // 基本信息总是显示在顶部
    case 'education':
      return props.resumeData.education.length > 0
    case 'work-experience':
      return props.resumeData.workExperience.length > 0
    case 'projects':
      return props.resumeData.projects.length > 0
    case 'skills':
      return props.resumeData.skills.length > 0
    case 'self-evaluation':
      return props.resumeData.selfEvaluation
    default:
      return false
  }
}
</script>
